<%-- 
    Document   : index
    Created on : 11/01/2014, 10:30:03 AM
    Author     : ronald
--%>
<jsp:useBean id="objetoControladorCliente" class="controladores.controladorCliente" scope="session" />
<jsp:setProperty name="objetoControladorCliente" property="*" />

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
	<head>
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>pidetuplato.com</title>
                <link href="css/bootstrap.min.css" rel="stylesheet">
                <link href="css/inicio.css" rel="stylesheet">
                <link href="css/magnific-popup.css" rel="stylesheet"> 
                <script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
                <script type="text/javascript" src="js/flux.min.js" charset="utf-8"></script>
                <script src="js/bootstrap.min.js"></script>
                <script src="js/facebook.js"></script>
                <script src="js/jquery.magnific-popup.min.js"></script>                 
                <script type="text/javascript" charset="utf-8">
                    $(document).ready(function() {
                    $('.iniciar-sesion').magnificPopup({
                        type:'inline',
                        midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
                    }),
                    $('.carrito-pedido').magnificPopup({
                        type:'inline',
                        midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
                    });
                    }),
                    $(function(){
                    window.myFlux = new flux.slider('#slider', {
                    autoplay: true,
                    controls: true,
                    delay: 5000,
                    pagination: false
                    });
                });                
                </script>
	</head>
	<body>
            <section class="contenedor">                
		<header>
                    <div class="slogan">
                        <a class="display-en-linea" href="index.jsp">
                            <img src="img/logo.png" class="logo"/>
                        </a>
                        <rp class="display-en-linea">
                            <h2 class="display-en-bloque">
                                Pidetuplato.com
                            </h2>
                            <h4 class="display-en-bloque">
                                Tu comida favorita desde la comodidad de tu casa
                            </h4>
                        </rp>
                    </div>
                    <div class="iniciarsesion">
                        <a href="#iniciar-sesion" class="iniciar-sesion">
                            <button type="button" class="btn btn-success">
                                Iniciar Sesion
                            </button>
                        </a>
                        <a href="#carrito-pedido" class="carrito-pedido"> 
                            <img src="img/carro_compra.png"/>
                        </a>
                    </div>                 
                </header>
                <section>
                    <section class="busquedad-menu">
                        ¿Que deseas comer hoy?
                        <form id="form_busquedad" action="" class="form-inline">
                            <input type="text" id="busquedad" class="form-control" required="" style="width: 77%;" placeholder="nombre del plato"/>
                            <input type="submit" class="btn btn-success" value="Buscar"/>                            
                        </form>
                        <div class="btn-group-vertical" style="width: 100%; margin: 5% auto;">
                            <button type="button" class="btn btn-primary btn-lg btn-block">Restaurantes</button>
                            <button type="button" class="btn btn-primary btn-lg btn-block">Categorias</button>
                            <button type="button" class="btn btn-warning btn-lg btn-block">Ranking TOP</button>
                        </div>
                    </section>
                    <section class="publicidad">
                            <% out.write(objetoControladorCliente.getListarPromocionesPaginaPrincipal()); %>
                            <br>                            
                    </section>
		</section>
                <footer>
                    <nav style="text-align: center;">
                        <a href="registroRestaurante.jsp" style="color: white; display: inline-block"> <ul style="display: inline-block">Registra tu Restaurante</ul></a>
                        <a href="politicas.jsp"><ul style="color: white; display: inline-block">Politicas de privacidad</ul></a>
                        <a href="condiciones.jsp"><ul style="color: white; display: inline-block">Terminos y condiciones</ul></a>
                        <a href="acerca.jsp"><ul style="color: white; display: inline-block">Acerca de Nosotros</ul></a>
                    </nav>
		</footer>
            </section>
        </body>
</html>

<div id="carrito-pedido" class="white-popup mfp-hide">
    <h2>Tu Pedido</h2>
</div>

<div id="iniciar-sesion" class="white-popup mfp-hide">
  <h2>Iniciar Sesion</h2>
  <form action="">
    <div style=" display: inline-block; vertical-align: top;">
        <label style="display: block;">Email</label><br>
        <label style="display: block;">Password</label>
    </div>
    <div style=" display: inline-block; vertical-align: top;">
        <input type="email" name="email" value="" required="true" style="display: block;"/><br>
        <input type="password" name="contrasena" value="" required="true" style="display: block;"/><br>
        <a style="display: block;text-align: center;">
            <input type="submit" class="btn btn-success" value="Aceptar" />
        </a>
    </div>
    <div style=" display: inline-block; vertical-align: top; margin-left: 2em;">
        <fb:login-button autologoutlink="true">Iniciar con Facebook</fb:login-button>
    </div>
  </form>
</div>